/*
 * @Description: 审批管理侧边筛选导航
 * @Author: Rfan
 * @Date: 2022-03-29 13:57:08
 * @LastEditTime: 2023-02-06 10:22:32
 */

import { Menu } from 'antd';
import classNames from 'classnames/bind';
import type { FC } from 'react';
import type { SelectInfo } from 'rc-menu/lib/interface';

import styles from '../styles/approvePage.module.scss';
import { EnumApproveNavTypes } from '../dictionaries';
import { useRightApproveContext } from '../contexts/RightApproveContext';

const cx = classNames.bind(styles);

export type IFilterSideNavProp = {
  type: string | number;
};

const FilterSideNav: FC<IFilterSideNavProp> = (props) => {
  const { type } = props;
  const { approveNav, setApproveNav } = useRightApproveContext();

  const handleMenuClick = ({ key }: SelectInfo) => {
    setApproveNav(key);
    console.log('keykey', key);
  };
  return (
    <div className={cx('filter-side-nav')}>
      <h6>{type === 'approve' ? '利用审批情况' : '借阅情况筛选'}</h6>
      <div className="filter-list">
        {type === 'approve' ? (
          <Menu selectedKeys={[approveNav]} onSelect={handleMenuClick}>
            <Menu.Item key={EnumApproveNavTypes.Undo}>待我审批</Menu.Item>
            <Menu.Item key={EnumApproveNavTypes.Done}>我已处理</Menu.Item>
          </Menu>
        ) : (
          <Menu>
            <Menu.Item key="1">借阅草稿</Menu.Item>
            <Menu.Item key="2">借阅中</Menu.Item>
            <Menu.Item key="3">已逾期</Menu.Item>
            <Menu.Item key="4">现场借阅</Menu.Item>
            <Menu.Item key="5">正常归还</Menu.Item>
            <Menu.Item key="6">逾期归还</Menu.Item>
            <Menu.Item key="7">异常终止</Menu.Item>
            <Menu.Item key="8">已拒绝</Menu.Item>
          </Menu>
        )}
      </div>
    </div>
  );
};

export default FilterSideNav;
